<script lang="ts" setup>
import { ref } from "vue";
import SubMenu from "./sub-menu.vue";
import { useRouter } from "vue-router";
const router = useRouter();
interface MenuProps {
  menu: any;
}
const props = withDefaults(defineProps<MenuProps>(), {
  menu: {
    id: "",
    children: [],
    path: "/home",
    component: "index",
    meta: {
      keepAlive: false,
      icon: "console-sql-outlined",
      componentName: "index",
      title: "测试菜单",
    },
    name: "home",
  },
});

const goToRouteHandle = (id: string, menu: any) => {
  console.log(menu);
  router.push({
    name: menu.name,
  });
};
</script>
<template>
  <div>
    <el-sub-menu
      :index="menu.name"
      v-if="menu.children && menu.children.length >= 1"
    >
      <template #title>
        <component :is="menu.meta.icon" :style="{ fontSize: '18px' }" />
        <span class="ml-6px">{{ menu.meta.title }}</span>
      </template>
      <SubMenu
        :menu="submenu"
        v-for="submenu in menu.children"
        :key="submenu.id"
      />
    </el-sub-menu>
    <el-menu-item
      :index="menu.name"
      v-else
      @click="goToRouteHandle(menu.id, menu)"
    >
      <component :is="menu.meta.icon" :style="{ fontSize: '18px' }" />
      <span class="ml-6px">{{ menu.meta.title }}</span>
    </el-menu-item>
  </div>
</template>
<style lang="scss" scoped></style>
